// 导入React
import React from "react";

/**
 * 受控组件示例
 * 
 * 注意 复选框 是根据 checked 属性获取状态值的
 */
class App extends React.Component{

    constructor(props) {
        super(props)
        // 表单状态
        this.state = {
           txt:'xx', // 文本框
           content: 'content', // 文本域
           city: 'bj', // 下拉框
           isChecked: true, // 复选框

        }
      }

    // 文本变化
    handleChange = (e) => {
        // 改变state
        this.setState({
            txt: e.target.value
        })
    }
    // 文本域变化
    handleContent = (e) => {
        this.setState({
            content: e.target.value
        })
    }
    // 下拉框变化
    handleCity = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    // 复选框变化
    handleIsChecked = (e) => {
        this.setState({
            isChecked: e.target.checked
        })
    }

    render() {
        console.log(this.state)
        return (
            <div>
                {/* 文本框 */}
                <input type='text' value={this.state.txt} onChange={this.handleChange}></input>
                <hr/>

                {/* 文本域 */}
                <textarea value={this.state.content}  onChange={this.handleContent}></textarea>
                <hr/>

                {/* 下拉框 */}
                <select value={this.state.city} onChange={this.handleCity}>
                    <option value='sh'>上海</option>
                    <option value='bj'>北京</option>
                    <option value='gz'>广州</option>
                </select>
                <hr/>

                {/* 复选框 */}
                <input type='checkbox' checked={this.state.isChecked} onChange={this.handleIsChecked}></input>
            </div>
        )
    }

}

export default App
